<template>
  <!-- Vue3组件不在需要根标签 -->
  <p class="title">{{ count }}</p>
  <p>count 是 {{ oddOrEven }}</p>
  <p>count 是 {{ count % 2 === 1 ? "奇数" : "偶数" }}</p>
  <button @click="count++">按钮</button>
</template>

<script lang="ts">
/*
  Vue2 和 Vue3 监视属性和计算属性用法基本一致

  面试问题：监视属性和计算属性有什么区别？
    1. 计算属性有缓存，监视属性没有
    2. 计算属性一定有返回值，监视属性没有
    3. 监视属性可以进行异步操作，计算属性不行

  开发问题：什么时候用监视属性？什么时候用计算属性？
    模板页面有一些变化的值，需要定义数据。
    1. 首先考虑定义 data 数据
    2. data 数据不能直接展示，需要对 data 数据进行加工处理（累加、求和、过滤等）可以使用计算属性
    3. data 数据发送变化要进行异步（其他）操作，考虑监视属性
*/

export default {
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
  methods: {},
  watch: {
    // count(newVal: number, oldVal: number) {
    //   console.log(newVal, oldVal);
    // },

    count: {
      handler(newVal: number, oldVal: number) {
        console.log(newVal, oldVal);
      },
      immediate: true, // 第一次触发
      // deep: true, // 深度监视
    },
  },
  computed: {
    // 只读的计算属性
    oddOrEven() {
      return this.count % 2 === 1 ? "奇数" : "偶数";
    },
    // 可读可写的计算属性
    xxx: {
      get() {
        return 111;
      },
      set(val: number) {
        console.log(val);
      },
    },
  },
};
</script>

<style scoped>
.title {
  color: yellowgreen;
}
</style>
